<template>
  <view class="floorBox">
    <view class="floor_title" v-for="(item, index) in list" :key="index">
      <img :src="item.floor_title.image_src" alt="" />
      <view class="next">
        <img class="left" :src="item.product_list[0].image_src" />
        <view class="right">
          <img
            v-show="index !== 0"
            v-for="(item2, index) in item.product_list"
            :key="index"
            :src="item.product_list[index].image_src"
            :class="{ nn: index % 2 === 0 }"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFloorDataAPI } from "@/api/index";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getFloorData();
  },
  methods: {
    async getFloorData() {
      const { message } = await getFloorDataAPI();
      this.list = message;
    },
  },
};
</script>

<style lang="scss">
.floorBox {
  display: flex;
  flex-direction: column;
  width: 100vw;
  .floor_title {
    margin-top: 20rpx;
    width: 100%;
    height: 455rpx;
    img {
      width: 750rpx;
      height: 59rpx;
    }
    .next {
      display: flex;
      justify-content: space-evenly;
      height: 386rpx;
      .left {
        width: 232rpx;
        height: 386rpx;
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        width: 480rpx;
        height: 396rpx;
        // background-color: skyblue;
        img {
          width: 233rpx;
          height: 188rpx;
        }
        .nn {
          margin-left: 15rpx;
        }
      }
    }
  }
}
</style>
